<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商家公共页</title>
    <!--公共css-->
    <div id="com_css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="ThemeBucket">
        <link rel="shortcut icon" href="#" type="image/png">
        <link th:href="@{/static/css/load.css}" rel="stylesheet">
        <link th:href="@{/static/css/bootstrap.min.css}"rel="stylesheet">
        <link th:href="@{/static/css/style.css}"rel="stylesheet">
        <link th:href="@{/static/css/style-responsive.css}" rel="stylesheet">
        <link th:href="@{/static/css/bootstrap-reset.css}" rel="stylesheet">
        <!--icheck-->
        <link th:href="@{/static/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
        <link th:href="@{/static/js/iCheck/skins/square/square.css}" rel="stylesheet">
        <link th:href="@{/static/js/iCheck/skins/square/red.css}" rel="stylesheet">
        <link th:href="@{/static/js/iCheck/skins/square/blue.css}" rel="stylesheet">
        <link th:href="@{/static/fonts/css/font-awesome.min.css}"rel="stylesheet">
        <!--pickers css-->
        <link rel="stylesheet" type="text/css" href="/static/js/bootstrap-datepicker/css/datepicker-custom.css" />
        <link rel="stylesheet" type="text/css" href="/static/js/bootstrap-timepicker/css/timepicker.css" />
        <link rel="stylesheet" type="text/css" href="/static/js/bootstrap-colorpicker/css/colorpicker.css" />
        <link rel="stylesheet" type="text/css" href="/static/js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
        <link rel="stylesheet" type="text/css" href="/static/js/bootstrap-datetimepicker/css/datetimepicker-custom.css" />

        <!--表格-->
        <link href="/static/css/table-responsive.css" rel="stylesheet" />
        <!--文件上传-->
        <link rel="stylesheet" type="text/css" th:href="@{static/css/bootstrap-fileupload.min.css}" />
        <!--Morris Chart CSS -->
        <link rel="stylesheet" href="/static/js/morris-chart/morris.css">
        <!--C3 Chart -->
<!--        <link href="/static/js/c3-chart/c3.css" rel="stylesheet"/>-->
    </div>
</head>
<body>

<!-- 左侧标签栏 start-->
<div id="com_leftmenu" class="left-side sticky-left-side">
    <!--logo and iconic logo start-->
    <div class="logo">
        <a th:href="@{/main}"><img th:src="@{/static/images/logo.png}" alt=""></a>
    </div>
    <div class="logo-icon text-center">
        <a th:href="@{/main}"><img th:src="@{/static/images/logo_icon.png}" alt=""></a>
    </div>
    <!--logo and iconic logo end-->
    <div class="left-side-inner">
        <!-- visible to small devices only -->
        <div class="visible-xs hidden-sm hidden-md hidden-lg">
            <div class="media logged-user">
                <img alt="" th:src="${session.merchants.gender}=='男'?'/static/images/user/boy_user.png':'/static/images/user/girl_user.png'" class="media-object">
                <div class="media-body">
                    <h4><a href="#" th:text="${session.merchants.account}">姓名</a></h4>
                    <span th:text="${session.merchants.gender}">"商家"</span>
                </div>
            </div>
            <h5 class="left-nav-title">账户信息</h5>
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li><a th:href="@{/modify_accountPage}"><i class="fa fa-cog"></i> <span>账户设置</span></a></li>
            </ul>
        </div>
        <!--左菜单-->
        <ul class="nav nav-pills nav-stacked custom-nav">
            <hr>
            <!--主页详情-->
            <li th:class="${active}=='0'?'active':''"class=""><a href="/main"><i class="fa fa-home"></i> <span>主页详情</span></a></li>
            <hr>
            <!--订单列表-->
            <li th:class="${active}=='1'?'active':''"class=""><a th:href="@{/OderListPage}"><i class="fa  fa-calendar-o"></i> <span>订单列表</span></a></li>
            <!--添加商品-->
            <li th:class="${active}=='2'?'active':''"><a th:href="@{/addGoodsPage}"><i class="fa fa-plus-square-o"></i> <span>添加商品</span></a></li>
            <!--商品信息-->
            <li th:class="${active}=='3'?'active':''"><a th:href="@{/myGoodsListpage}"><i class="fa fa-th-list"></i><span>商品信息</span></a></li>
            <hr>
            <!--退出登录-->
            <li><a th:href="@{/exit_mer}" onclick="exit()"><i class="fa fa-sign-in"></i> <span>重新登录</span></a></li>
            <script>
                function exit() {
                    if (window.history && window.history.pushState()) {
                        $(window).on('popstate', function () {
                            window.history.forward(1);
                        });
                    }
                }
            </script>
        </ul>
        <!--sidebar nav end-->
    </div>
</div>
<!-- left side end-->

<!-- 顶部导航栏-->
<div id="com_headermenu" class="header-section">

    <!--toggle button start-->
    <a class="toggle-btn"><i class="fa fa-bars"></i></a>
    <!--toggle button end-->
    <!--notification menu start -->
    <div class="menu-right">
        <ul class="notification-menu">
            <li>
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <img th:src="${session.merchants.gender}=='男'?'/static/images/user/boy_user.png':'/static/images/user/girl_user.png'" alt="" />
                    <!--                    <img th:src="@{'/downloads/show/'+${session.store.store_image}}"style="height: auto">-->
                    [[${session.merchants.getAccount()}]]
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                    <li><a th:href="@{/modify_accountPage}"><i class="fa fa-cog"></i>  账户设置</a></li>
                    <li><a data-toggle="modal" data-target="#updatePassWord"><i class="fa fa-unlock-alt"></i>  修改密码</a></li>
                    <li><a th:href="@{/exit_mer}" onclick="exit()"><i class="fa fa-sign-out"></i> 退出登录</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <!--notification menu end -->
</div>
<!-- header section end-->
<!--底部页脚-->
<footer class="sticky-footer" id="com_footer">

    2021 &copy; <a href="https://github.com/ZhangHeng0805" target="_blank"><span class="fa fa-github"></span>星曦向荣</a>
    - @ <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=wriqo6ylqqespezy_vL3grOz7KGtrw"><i class="fa fa-envelope-o"></i>联系反馈</a>
    <span class="tools pull-right">
        <span class="btn btn-default up_down"><label class="fa  fa-angle-double-down"></label></span>
        <span class="btn btn-default up_top"><label class="fa  fa-angle-double-up"></label></span>
    </span>
</footer>

<!--消息提示-->
<div id="com_alert" th:if="${msg}!=null" th:switch="${msg.code}">
    <div th:case="200" class="alert alert-success fade in" >
        <button type="button" class="close close-sm" data-dismiss="alert">
            <i class="fa fa-times"></i>
        </button>
        <label style="color: green" th:utext="${msg.message}"></label>
    </div>
    <div th:case="100" class="alert alert-info fade in" >
        <button type="button" class="close close-sm" data-dismiss="alert">
            <i class="fa fa-times"></i>
        </button>
        <label th:utext="${msg.message}"></label>
    </div>
    <div th:case="500" class="alert alert-danger fade in" >
        <button type="button" class="close close-sm" data-dismiss="alert">
            <i class="fa fa-times"></i>
        </button>
        <label style="color: red" th:utext="${msg.message}"></label>
    </div>
    <div th:case="404" class="alert alert-warning fade in" >
        <button type="button" class="close close-sm" data-dismiss="alert">
            <i class="fa fa-times"></i>
        </button>
        <label style="color: orange" th:utext="${msg.message}"></label>
    </div>
</div>

<!--公共js-->
<div id="com_js">
    <!-- 修改密码Modal -->
    <div class="modal fade" id="updatePassWord" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改密码</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" th:action="@{/modify_password}" role="form" method="post">
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label">旧密码</label>
                            <div class="col-lg-10">
                                <input type="password"oninput="titleInput('password1','t_password1',18)" name="pwd1"class="form-control" id="password1" placeholder="请输入旧密码" required>
                                <p id="t_password1" class="help-block">（字数限制6~18字）</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label">新密码</label>
                            <div class="col-lg-10">
                                <input type="password" oninput="titleInput('password2','t_password2',18)" class="form-control" id="password2" placeholder="请输入新密码" required>
                                <p id="t_password2" class="help-block">（字数限制6~18字）</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label">再次确认</label>
                            <div class="col-lg-10">
                                <input type="password" oninput="titleInput('password3','t_password3',18)"  class="form-control" id="password3" placeholder="请再次输入新密码" required>
                                <p id="t_password3" class="help-block">（字数限制6~18字）</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <!--验证码-->
                            <div class="col-md-12" style="text-align: center">
                                <div class="col-lg-4">
                                    <img th:src="@{/static/images/QRcode.jpg}" style="height: 150px">
                                </div>
                                <div class="col-lg-6"style="padding-top: 15px">
                                    <div class="row">
                                        <label>扫码关注微信公众号,回复：<span class="text-danger" id="codeID">1234</span>；获取验证码</label>
                                    </div>
                                    <div class="row" style="padding-top: 10px">
                                        <input type="hidden" name="id">
                                        <input type="text" placeholder="输入验证码" class="form-control" name="code" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <script src="/static/my_js/encryp/md5.js"></script>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                    <button class="btn btn-primary sub_pwd">修改</button>
                </div>
            </div>
        </div>
    </div>
    <!-- modal -->

    <script th:src="@{/static/js/jquery-1.10.2.min.js}"></script>
    <script th:src="@{/static/js/jquery-ui-1.9.2.custom.min.js}"></script>
    <script th:src="@{/static/js/jquery-migrate-1.2.1.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/modernizr.min.js}"></script>
    <script th:src="@{/static/js/jquery.nicescroll.js}"></script>
    <!--common scripts for all pages-->
    <script th:src="@{/static/js/scripts.js}"></script>
    <!--input输入-->
    <script src="/static/my_js/input.js"></script>
    <!--文件上传-->
    <script type="text/javascript" th:src="@{/static/js/bootstrap-fileupload.min.js}"></script>
    <!--选择器 plugins-->
    <script type="text/javascript" src="/static/js/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-daterangepicker/moment.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
    <!--pickers initialization-->
<!--    <script src="/static/js/pickers-init.js"></script>-->
    <!--Chart JS-->
    <script src="/static/js/chart-js/Chart.js"></script>
    <!--Morris Chart-->
    <script src="/static/js/morris-chart/morris.js"></script>
    <script src="/static/js/morris-chart/raphael-min.js"></script>
    <!--C3 Chart-->
<!--    <script src="/static/js/c3-chart/d3.v3.min.js"></script>-->
<!--    <script src="/static/js/c3-chart/c3.js"></script>-->
<!--    <script src="/static/js/c3-chart/c3-chart.init.js"></script>-->
    <!-- jQuery Flot Chart-->
<!--    <script src="/static/js/flot-chart/jquery.flot.js"></script>-->
<!--    <script src="/static/js/flot-chart/jquery.flot.tooltip.js"></script>-->
<!--    <script src="/static/js/flot-chart/jquery.flot.resize.js"></script>-->
<!--    <script src="/static/js/flot-chart/jquery.flot.pie.resize.js"></script>-->
<!--    <script src="/static/js/flot-chart/jquery.flot.selection.js"></script>-->
<!--    <script src="/static/js/flot-chart/jquery.flot.stack.js"></script>-->
<!--    <script src="/static/js/flot-chart/jquery.flot.time.js"></script>-->
<!--    <script src="/static/js/flot.chart.init.js"></script>-->
    <!--excel-->
    <script src="/static/plug-in/excel/excel-gen.js"></script>
    <script src="/static/plug-in/excel/FileSaver.js"></script>
    <script src="/static/plug-in/excel/jszip.js"></script>
    <script>
        $(".up_down").click(function () {
            $("html,body").animate({
                scrollTop:$(".bottom").offset().top
            },800);
        });
        $(".up_top").click(function () {
            $("html,body").animate({
                scrollTop:$(".top").offset().top
            },800);
        });
        $(".sub_pwd").click(function () {
            var old_pwd=$("#password1").val();
            var new_pwd=$("#password2").val();
            var new_pwd1=$("#password3").val();
            var id=$("input[name='id']").val();
            var code=$("input[name='code']").val();
            if (old_pwd.length>=6&&old_pwd.length<=18){
                if (new_pwd.length>=6&&new_pwd.length<=18){
                    if (code.length>0){
                        if (new_pwd===new_pwd1){
                            if (new_pwd!=old_pwd){
                                $(".sub_pwd").attr('disabled',"true");
                                sub_pwd(new_pwd,old_pwd,id,code);
                            } else {
                                alert("新旧密码不能相同")
                            }
                        } else {
                            alert("新密码两次输入不一致")
                        }
                    }else {
                        alert("请输入验证码")
                    }
                }else {
                    alert("新密码长度限制:6~18位")
                }
            } else {
                alert("旧密码长度限制:6~18位")
            }

        });
        function sub_pwd(new_pwd,old_pwd,id,code) {
            $.ajax({
                url:'/modify_password',
                method:'post',
                data:{
                    new_pwd:zh_md5(new_pwd),
                    old_pwd:zh_md5(old_pwd),
                    id:id,
                    code:code
                },
                dataType:'json',
                success:function (d) {
                    if (d.code==200){
                        alert(d.message);
                        window.location.href="/exit_mer";
                    } else {
                        alert(d.message);
                        $('.sub_pwd').removeAttr("disabled");
                        getcode();
                        $("input[name='code']").val('');
                    }
                },
                error:function (e) {
                    alert("修改密码错误："+e);
                    window.location.href="/exit_mer";
                }
            })
        }
        //修改密码弹窗显示时
        $("#updatePassWord").on('show.bs.modal',function () {
            getcode();
        });
        //修改密码弹窗关闭时
        $("#updatePassWord").on('hide.bs.modal',function () {
            $("#password1").val('');
            $("#password2").val('');
            $("#password3").val('');
        });
        function getcode() {
            //获取验证码
            $.ajax({
                url:'/Verification_Code?t='+Date.now(),
                method:'get',
                success:function (d) {
                    $("#codeID").text(d);
                    $("input[name='id']").val(d);
                },
                error:function (e) {
                    alert("验证码获取错误："+e);
                    window.location.href="/exit_mer";
                }
            })
        }
    </script>

</div>
</body>
</html>